<template>
  <div class>
    <div
      v-if="showInfo"
      class="cesiumdialog"
      :style="{ left: (winPos[0] - 148) + 'px', bottom: winPos[3] + 'px',fontSize: '30px' }"
    >
      <i
        class="el-icon-close"
        style="position: absolute;right: 10px;top: 10px;cursor: pointer;pointer-events: auto;"
        @click="closebox()"
      ></i>
      <div v-html="options.diahtml"></div>
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";
export default {
  name: "cardpoint",
  props: {
    diahtml: "",
    options: {}
  },
  components: {},
  data() {
    return {
      winPos: [0, 0, 0, 0],
      showInfo: true,
      uniqueID: ""
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {
    winPos: {
      handler: function(n, o) {

        //判断位置与窗口偏移
        let width = document.documentElement.clientWidth
        let height = document.documentElement.clientHeight

        let offwidth = n[0]
        let offheight = n[1]
        
        let reswidth = width - offwidth
        let resheight = height - offheight

        if (reswidth < 220 || resheight < 20 || reswidth > width || resheight >  height) {
          this.showInfo = false
        }else{
          this.showInfo = true
        }

      }
    }
  },
  mounted() {
    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 300,
        show: false
      }
    });

    this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = [
      this.options.position.longitude,
      this.options.position.latitude,
      this.options.position.height
    ];
    XE.MVVM.track(this, "winPos", pin1, "winPos");

  },
  methods: {
    closebox() {
      //删除pin数组
      // let pinarr = _.cloneDeep(this.$parent.pinarr);
      // pinarr.map((item, index) => {
      //   if (item == this.options.uid) {
      //     this.$parent.pinarr.splice(index, 1);
      //   }
      // });

      //删除_earth.children对象
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.dependlistArr.cardpoint);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.dependlistArr.cardpoint.splice(index, 1);
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.cesiumdialog {
  
  position: absolute;
  width: 420px;
  height: 500px;
  color: white;
  background-image: url("/configuration/cesium/dialog.png");
  background-size: 100% 100%;
  padding: 15px;
  border-radius: 5px;
  pointer-events: none;
  // cursor: pointer;
}
</style>